<route lang="yaml">
meta:
  requiresAuth: false
</route>
<template>
  <el-card class="login">
    <div class="avatar">
      <img src="../../../assets/img/auth/购物.png" alt="" />
    </div>
    <h1>用户登录中心</h1>
    <el-form :rules="loginRules" :model="loginForm">
      <el-form-item prop="mobile">
        <el-input v-model="loginForm.mobile" placeholder="手机号码"></el-input>
      </el-form-item>
      <el-form-item prop="password">
        <el-input
          v-model="loginForm.password"
          show-password
          placeholder="密码"
        ></el-input>
      </el-form-item>
      <div class="f1">
        <el-checkbox v-model="isRememberMe" checked>记住我</el-checkbox>
        <span>忘记密码?</span>
      </div>
      <el-form-item>
        <el-button type="primary" plain @click="handleSubmit">登录</el-button>
        <el-button type="info" plain @click="store.dispatch('logout')"
          >登出</el-button
        >
      </el-form-item>
      <div class="Register">
        <span>还没加入?</span>
        <span @click="toRegister">立即注册</span>
      </div>
    </el-form>
  </el-card>
</template>

<script setup lang="ts">
import { onMounted, reactive, ref, Ref } from 'vue'
import { useRoute, useRouter } from 'vue-router'
import { useStore } from '../../../store'
import { useErrors } from '../../../composable/useErrors'
import { LoginForm } from '../../../services/auth'

const store = useStore()
const router = useRouter()
const { query } = useRoute()
const { errors, errorHandler } = useErrors()

// 保存登录需要的数据
const loginForm = reactive<LoginForm>({
  mobile: '',
  password: ''
})

// 是否记住我
const isRememberMe = ref(true)
onMounted(() => {
  const loginDataJson = window.localStorage.getItem('loginData')
  if (loginDataJson) {
    loginForm.mobile = JSON.parse(loginDataJson).mobile
    loginForm.password = JSON.parse(loginDataJson).password
  }
})

// 如果用户已经登录，跳转到首页
onMounted(async () => {
  if (store.state.currentUser) {
    router.push('/items')
  }
})

// 提交登录信息
async function handleSubmit() {
  try {
    if (isRememberMe.value) {
      window.localStorage.setItem('loginData', JSON.stringify(loginForm))
    }
    // vuex 分发 login action，定义在 store/index.ts 中
    // 这个 action 会请求登录 API 并处理 accessToken 与用户信息的保存
    await store.dispatch('login', loginForm)
    // 登录后跳转，如果 URL 参数中包含 returnUrl 则跳转到指定地址,没有则跳到用户中心
    await router.push((query.returnUrl as string) ?? '/usercenter/profile')
  } catch (err) {
    errorHandler(err)
    alert("账号或者密码错误")
  }
}

// 跳转到注册
const toRegister = () => {
  router.push('/auth/frame/register')
}

// 自定义手机号验证
const checkphonenumber = (rule, value, callback) => {
  if (!value) {
    return callback(new Error('请输入手机号'))
  }
  const re =
    /^(13[0-9]|14[01456879]|15[0-35-9]|16[2567]|17[0-8]|18[0-9]|19[0-35-9])\d{8}$/
  if (!re.test(value)) {
    callback(new Error('请输入正确手机号'))
  } else {
    callback()
  }
}

// 表单校验
const loginRules = reactive({
  // 验证用户名是否合法
  mobile: [
    {
      validator: checkphonenumber,
      trigger: 'blur'
    }
  ],
  // 验证密码是否合法
  password: [
    {
      required: true,
      message: '请输入密码',
      trigger: 'blur'
    },
    {
      min: 8,
      message: '密码小于8位',
      trigger: 'blur'
    }
  ]
})
</script>

<style lang="less" scoped>
.login {
  margin-left: 50%;
  transform: translateX(-50%);
  // margin-top: 250px;
  border-radius: 100px;
  width: 1000px;
  padding: 50px 0;
  background-color: rgba(255, 255, 255, 0.61);
  .avatar {
    margin-left: 50%;
    transform: translateX(-50%);
    width: 150px;
    height: 150px;
    border-radius: 50%;
    overflow: hidden;
    background-color: #ffffff;
    background-image: linear-gradient(90deg, #ffffff 0%, #b6f2ff 83%);
    box-shadow: 0 0 20px #72acb9;
    img {
      width: 200px;
      position: relative;
      left: -20px;
      top: 18px;
    }
  }
  h1 {
    text-align: center;
    margin-top: 50px;
    color: #585858;
    font-size: 30px;
  }
}
.el-form {
  margin-top: 50px;
  text-align: center;
  margin-left: 50%;
  transform: translateX(-50%);
  :deep(.el-form-item) {
    background-color: unset !important;
  }
  :deep(.el-input__inner) {
    height: 47px;
    background-color: rgba(255, 255, 255, 0.247);
    color: rgb(0, 0, 0) !important;
    border-radius: 40px;
  }
  .el-input {
    width: 500px;
    border-radius: 50%;
    background: transparent;
    ::-webkit-input-placeholder {
      color: #585858;
    }
  }
  .f1 {
    .el-checkbox {
      color: #585858;
      margin-right: 320px;
    }
    span {
      display: inline-block;
      font-size: 15.5px;
      color: #585858;
      cursor: pointer;
    }
  }
  .el-button {
    display: inline-block;
    margin: 50px 45px;
    width: 150px;
    border-radius: 20px;
    background-color: unset;
    color: #585858;
  }
  .Register {
    span:nth-child(2) {
      margin-left: 10px;
      cursor: pointer;
    }
  }
}
.info {
  position: absolute;
  top: 0;
  // background-color: aqua;
}
</style>
